
import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
// import 
import { connect } from 'react-redux'
import {
    Space
} from 'antd';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import request from '../../../utils/request';

function Rose(props) {
    // const handlerAdd = () => {

    // }
    // const count = () => {

    // }
    const [data, setData] = useState([])
    useLayoutEffect(() => {
        request.get('/list/count').then(res => {
            console.log(res.data.movieCount);
            setData(res.data.movieCount)
        })
    }, [])
    const dom = useRef();
    useEffect(() => {
        if (!dom.current) {
            dom.current = echarts.init(document.getElementById('chart'));
        }
        console.log(dom.current, 'current');
        dom.current.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '电影类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data
                }
            ]
        })
    }, [data]);

    return (
        <div>

            <Space>
                <div id='chart' style={{
                    width: '500px',
                    height: '500px'
                }}>
                </div>
            </Space>
        </div>
    );
}

export default Rose